<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
            <title>
                WebSocket测试
            </title>
            <script src="jquery.min.js" type="text/javascript">
            </script>
        </meta>
    </head>
    <body>
        <h2>
            WebSocket Test
        </h2>
        昵称：
        <input id="name" size="5" type="text" value="roy"/>
        <input id="content" type="text">
            <button onclick="speak_to_all()">
                发送
            </button>
            <br/>
            <br/>
            <textarea cols="50" id="message" rows="10" style="overflow-x:hidden">
            </textarea>
            <div id="output">
            </div>
        </input>
    </body>
    <script type="text/javascript">
        var wsUri ="ws://45.40.254.72:3999/"; 
var output; 
function init() { 
output = document.getElementById("output"); 
testWebSocket();
}
function testWebSocket() { 
websocket = new WebSocket(wsUri); 
websocket.onopen = function(evt) { 
onOpen(evt) 
};
websocket.onclose = function(evt) { 
onClose(evt) 
};
websocket.onmessage = function(evt) {
onMessage(evt) 
};
websocket.onerror = function(evt) { 
onError(evt) 
};
}
function get_speak_msg(){
var name=document.getElementById("name").value;
var speak=document.getElementById("content").value;
var json_msg='{"name":"'+name+'","speak":\"'+speak+'"}';
return json_msg;
}
function pack_msg(type,msg){
return '{"type":"'+type+'","roomid":101,"uid":3,"msg":'+msg+'}';
}
function onOpen(evt) {
// append_speak("已经联通服务器.........");
speak_msg=get_speak_msg();
send_msg=pack_msg("login",speak_msg);
doSend(send_msg);
}
function onClose(evt) { 
append_speak("俺老孙去也！");
} 
function onMessage(evt) {
append_speak(evt.data);
}
function onError(evt) {
alert(evt.data);
}
function doSend(message) { 
websocket.send(message);
}
function append_speak(new_msg){
    $new_msg = $.parseJSON(new_msg)
    var str = '';
    var $content = $new_msg.content,$history = $.parseJSON($new_msg.history);
    console.log($history)
    if ($history != null && $history.length > 0) {
        for(var i=0;i<$history.length;i++){
            str = $history[i]['name']+" 说：\n"+$history[i]['speak'];
            document.getElementById("message").value=document.getElementById("message").value+str+"\n";
        }
    }
    if ($content.type == 'login') {
        str = $content.msg.name+' 来了'
    }else{
        str = $content.msg.name+" 说：\n"+$content.msg.speak
    }
document.getElementById("message").value=document.getElementById("message").value+str+"\n";
document.getElementById('message').scrollTop = document.getElementById('message').scrollHeight;
}
function speak_to_all(){
send_msg=pack_msg("speak",get_speak_msg());
if(document.getElementById("content").value==""){
return;
}
doSend(send_msg);
document.getElementById("content").value="";
}
init();
    </script>
</html>